<template>
  <div>
    <topBar></topBar>
    <div class="container my-5">
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 shadow-lg">
        <div class="row">
          <div class="col-2">
            <router-link
              :to="{ path: '/consumerHomePage' }"
              class="btn btn-primary"
              >返回</router-link
            >
          </div>
        </div>
        <h4 class="text-primary">查询结果</h4>
        <h2 class="align-center">{{ date }}热度行情</h2>
        <table class="table">
          <thead class="table-success">
            <tr>
              <th scope="col">#</th>
              <th scope="col">名称</th>
              <th scope="col">买家热度</th>
              <th scope="col">卖家热度</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="index in range(start, end)" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ cateName[index] }}</td>
              <td>{{ buyerHeat[index] }}</td>
              <td>{{ sellerHeat[index] }}</td>
            </tr>
          </tbody>
        </table>
        <div class="row">
          <div class="col-lg-5"></div>
          <div class="col-lg-1">
            <h5>
              <button class="badge bg-secondary" v-on:click="pageReduce()">
                上一页
              </button>
            </h5>
          </div>
          <div class="col-lg-1">
            <h5>
              <button class="badge bg-secondary" v-on:click="pageAdd()">
                下一页
              </button>
            </h5>
          </div>
          <div class="col-lg-5"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/consumer/topBar";
export default {
  data() {
    return {
      date: "",
      data: [],
      pageNum: 8,
      cateName: [],
      buyerHeat: [],
      sellerHeat: [],
      start: 0,
      end: 0,
      begin: 0,
      part: 0,
    };
  },
  components: {
    topBar: topBar,
  },
  mounted() {
    this.date = this.$route.query.date;

    this.axios
      .get(
        "http://122.51.157.58:8081/api-service/getHotBySeller?key=123456"
      )
      .then((body) => {
        this.data = body.data.data.result;
        for (var i = 0; i < this.data.length; i++) {
          this.cateName.push(this.data[i].cateName);
          this.buyerHeat.push(this.data[i].buyerHeat);
          this.sellerHeat.push(this.data[i].sellerHeat);
        }
        this.part = Math.floor(this.data.length / this.pageNum);
        if (this.part == 0) {
          this.end = this.data.length;
        } else {
          this.end = this.pageNum;
        }
      });
  },
  methods: {
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
    pageAdd() {
      var gap = this.data.length - this.end;
      if (gap >= this.pageNum) {
        this.start += this.pageNum;
        this.end += this.pageNum;
      } else if (this.end != this.data.length) {
        this.start += this.pageNum;
        this.end = this.data.length;
      }
    },
    pageReduce() {
      if (this.end == this.data.length) {
        this.start -= this.pageNum;
        this.end = this.part * this.pageNum;
      } else if (this.start != 0) {
        this.start -= this.pageNum;
        this.end -= this.pageNum;
      }
    },
  },
};
</script>


<style scoped>
.align-center {
  text-align: center;
}
header {
  background-color: #2c7d72;
}
</style>